<template>
    <!-- 车型编辑弹框 -->
    <CommonModal v-model="state.visible" @handleOk="handleOk" @handleCancel="handleCancel" :title="state.modalTitle"
        :width="600">
        <a-form class="form_box" ref="formRef" name="custom-validation" :model="formState" :rules="rules"
            v-bind="layout">
            
            <a-form-item has-feedback label="车企" name="manufacturerId" :colon="false">
                <a-select v-model:value="formState.manufacturerId" 
                    placeholder="请选择车企"
                    allowClear>
                    <a-select-option v-for="item in state.manufacturerList" :key="item.id" :value="item.id">
                            {{ item.name }}
                        </a-select-option> 
                </a-select>
            </a-form-item>

            <a-form-item has-feedback label="车型" name="name" :colon="false">
                <a-input v-model:value="formState.name" autocomplete="off" placeholder="请输入车型" />
            </a-form-item>
        </a-form>
    </CommonModal>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { bizVehicleTypeAdd , bizVehicleTypeUpdate } from "@/service/nmcApi"
import { getManufacturerCompany } from "@/utils/baseData"

const emit = defineEmits(['success'])

const state = reactive({
    visible: false,
    modalTitle: '新增',
    manufacturerList: [
       
    ]
})

const formRef = ref()

// 表单数据
const formState = reactive({
    manufacturerId: null,  // 车企
    name: '', // 车型
    id:''  // 新增时为空，编辑时为id
})

// 表单验证规则
const rules = {
    manufacturerId: [{ required: true, message: '请选择车企' }],
    name: [{ required: true, message: '请输入车型' }]
}

// 表单布局
const layout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 16,
    },
}

// 显示弹窗
const showModal = async (obj) => {
    state.manufacturerList = await getManufacturerCompany()
    state.modalTitle = obj.id ? '编辑车型' : '新增车型'
    
    if (obj.id) {
        // 编辑模式，加载现有数据
        Object.assign(formState, {
            manufacturerId: obj.manufacturerId || null,
            name: obj.name || '',
            id: obj.id
        })
    } else {
        // 新增模式，清空表单
        Object.keys(formState).forEach(key => {
            formState[key] = ''
        })
        formState.manufacturerId = null
    }
    
    state.visible = true
}

// 确认
const handleOk = () => {
    formRef.value.validateFields().then(res => {
        const submitData = {
            ...formState
        }
        submitData.manufacturerName = state.manufacturerList.find(item => item.id === formState.manufacturerId).name
        let axiosFn = formState.id ? bizVehicleTypeUpdate : bizVehicleTypeAdd
        axiosFn(submitData).then(res => {
            console.log('提交数据:', submitData)
            message.success('保存成功')
            state.visible = false
            emit('success', submitData)
        }).catch(err => {
            message.error('表单验证不通过')
        })
    }).catch(err => {
        // message.error('表单验证不通过')
    })
}

// 取消
const handleCancel = () => {
    formRef.value.resetFields()
    state.visible = false
}

// 暴露方法给父组件
defineExpose({ showModal })
</script>

<style scoped lang="less">
.form_box {
    input,
    :deep(.ant-select-selector) {
        height: 32px;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 6px;
        border: 1px solid #E0E0E0;
    }

    :deep(.ant-form-item-control-input) {
        width: 250px;
    }
}
</style>